<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col :span="2">
        <el-button
          type="primary"
          plain
          size="mini"
          icon="el-icon-plus"
          @click="onOpenAddMenuModal"
        >新增</el-button>
      </el-col>
    </el-row>

    <el-table :data="tableData" row-key="menu_id" default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column label="菜单名称" prop="menu_name" />
      <el-table-column label="图标" prop="icon" width="50" align="center" />
      <el-table-column label="排序" prop="order_num" width="50" align="center" />
      <el-table-column label="权限标识" prop="perms" align="left" />
      <el-table-column label="组件路径" prop="component" align="left" />
      <el-table-column label="显示状态" width="80" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.visible ? '隐藏' : '显示' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="菜单状态" width="80" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.status ? '禁用' : '正常' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.create_time }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="left">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="onOpenModifyMenuModal(scope.$index, scope.row)">修改</el-button>
          <el-button v-if="scope.row.menu_type != 'F'" type="text" size="small" @click="onOpenAddMenuModal(scope.$index, scope.row)">增下级</el-button>
          <!--          <el-button type="text" size="small" @click="onDeletMenu(scope.$index, scope.row)">删除</el-button>-->
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="title" :visible.sync="open" width="650px" append-to-body :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form ref="menuForm" :model="menuForm" :rules="menuFormRules" label-width="80px">
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item prop="parent_id" label="上级菜单">
              <treeselect v-model="menuForm.parent_id" :normalizer="normalizer" placeholder="请选择上级部门" :options="menuTree" :show-count="true" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="menu_type" label="菜单类型">
              <el-radio-group v-model="menuForm.menu_type">
                <el-radio label="M">目录</el-radio>
                <el-radio label="C">菜单</el-radio>
                <el-radio label="F">按钮</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col v-if="menuForm.menu_type != 'F'" :span="24">
            <el-form-item prop="icon" label="菜单图标">
              <el-input v-model="menuForm.icon" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item prop="menu_name" label="菜单名称">
              <el-input v-model="menuForm.menu_name" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="order_num" label="显示排序">
              <el-input-number v-model="menuForm.order_num" style="width: 100%;" controls-position="right" :min="0" />
            </el-form-item>
          </el-col>

          <el-col v-if="menuForm.menu_type != 'F'" :span="12">
            <el-form-item prop="is_frame" label="是否外链">
              <el-radio-group v-model="menuForm.is_frame">
                <el-radio :label="0">是</el-radio>
                <el-radio :label="1">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col v-if="menuForm.menu_type != 'F'" :span="12">
            <el-form-item prop="path" label="路由地址">
              <el-input v-model="menuForm.path" />
            </el-form-item>
          </el-col>

          <el-col v-if="menuForm.menu_type == 'C'" :span="12">
            <el-form-item prop="component" label="组件地址">
              <el-input v-model="menuForm.component" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="perms" label="权限标识">
              <el-input v-model="menuForm.perms" />
            </el-form-item>
          </el-col>

          <el-col v-if="menuForm.menu_type != 'F'" :span="12">
            <el-form-item prop="visible" label="显示状态">
              <el-radio-group v-model="menuForm.visible">
                <el-radio :label="0">显示</el-radio>
                <el-radio :label="1">隐藏</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col v-if="menuForm.menu_type != 'F'" :span="12">
            <el-form-item prop="order_num" label="菜单状态">
              <el-radio-group v-model="menuForm.status">
                <el-radio :label="0">正常</el-radio>
                <el-radio :label="1">停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col v-if="menuForm.menu_type == 'C'" :span="12">
            <el-form-item prop="dept_name" label="是否缓存">
              <el-radio-group v-model="menuForm.is_cache">
                <el-radio :label="0">缓存</el-radio>
                <el-radio :label="1">不缓存</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="open = false">取 消</el-button>
        <el-button size="small" type="primary" @click="onAddOrModifyMenu">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addMenuApi, getMenuListApi, getTreeMenuApi, modifyMenuApi } from '@/api/menu'
import { toTreeAndMap } from '@/utils'

// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
  name: 'Menu',
  components: { Treeselect },
  data() {
    return {
      loading: false,
      queryParams: {},
      tableData: [],

      title: '',
      open: false,
      menuForm: {},
      menuFormRules: {
        parent_id: [
          { required: true, message: '上级菜单不能为空', trigger: 'blur' }
        ],
        menu_name: [
          { required: true, message: '菜单名称不能为空', trigger: 'blur' }
        ],
        order_num: [
          { required: true, message: '显示排序不能为空', trigger: 'blur' }
        ]
      },

      menuTree: [],
      normalizer(node) {
        return {
          id: node.menu_id,
          label: node.menu_name,
          children: node.children
        }
      }
    }
  },
  created() {
    this.onGetTableData()
  },
  methods: {
    /**
     * 重置菜单表单
     */
    resetMenuForm() {
      this.menuForm = {
        menu_id: undefined, // 菜单ID
        menu_name: undefined, // 菜单名称
        parent_id: undefined, // 上级ID
        order_num: 0, // 排序
        path: undefined, // 路由地址
        component: undefined, // 组件路径
        is_frame: 1,
        is_cache: 1,
        menu_type: 'M', // 菜单类型（M目录 C菜单 F按钮）
        visible: 0,
        status: 0,
        perms: undefined,
        icon: undefined
      }
    },

    onOpenAddMenuModal(index, row) {
      this.resetMenuForm()
      this.onGetTreeMenu()
      if (row) {
        this.menuForm.parent_id = row.menu_id
      }
      this.title = '新建菜单'
      this.open = true
    },

    /**
     * 打开修改部门弹窗
     * @param index 当前索引
     * @param row 当前部门数据
     */
    onOpenModifyMenuModal(index, menu) {
      this.resetMenuForm()
      this.onGetTreeMenu()
      this.menuForm = {
        ...menu
      }
      this.title = '修改菜单'
      this.open = true
    },

    /**
     * 获取部门列表
     */
    onGetTableData() {
      this.loading = true
      const params = {
        ...this.queryParams
      }
      getMenuListApi(params).then((res) => {
        this.loading = false
        if (res && res.code === 0) {
          const list_arr = res.data.map((item) => {
            item.visible = +item.visible
            item.status = +item.status
            return item
          })

          const { treeData } = toTreeAndMap(list_arr, 'menu_id', 'parent_id')

          // const list = toTreeByRecursion(list_arr, 'dept_id', 'parent_id', 0, 'children')
          this.tableData = treeData
        }
      }).catch(() => {
        this.loading = false
      })
    },

    onAddOrModifyMenu() {
      this.$refs.menuForm.validate((valid) => {
        if (valid) {
          const params = {
            menu_id: this.menuForm.menu_id,
            parent_id: this.menuForm.parent_id,
            menu_type: this.menuForm.menu_type,
            icon: this.menuForm.icon,
            menu_name: this.menuForm.menu_name,
            order_num: this.menuForm.order_num,
            is_frame: this.menuForm.is_frame,
            path: this.menuForm.path,
            component: this.menuForm.component,
            perms: this.menuForm.perms,
            visible: this.menuForm.visible,
            status: this.menuForm.status,
            is_cache: this.menuForm.is_cache
          }

          // 新增部门
          if (this.menuForm.menu_id === undefined) {
            addMenuApi(params).then((res) => {
              if (res && res.code === 0) {
                this.open = false
                this.$message.success(res.msg)
                this.onGetTableData()
              } else {
                this.$message.error(res.msg)
              }
            })
          } else {
            // 修改部门
            modifyMenuApi(params).then((res) => {
              if (res && res.code === 0) {
                this.open = false
                this.$message.success(res.msg)
                this.onGetTableData()
              } else {
                this.$message.error(res.msg)
              }
            })
          }
        }
      })
    },

    onGetTreeMenu() {
      getTreeMenuApi({
        add_top: 1
      }).then((res) => {
        if (res && res.code === 0) {
          this.menuTree = res.data
        }
      })
    }

  }
}
</script>

<style scoped>

</style>
